<%@ page import="grails.converters.JSON"%>

<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Search Deals</title>
<script src="${resource(dir:'js', file:'highcharts.js') }"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
	href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css', file:'demo_table.css') }">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
	src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
</head>
<body>
	<h2>Search Results</h2>
	<br />
	<div id="deal-category" class="pull-left">
		<form>
			<g:each var="category" in="${categories }">

				<g:if test="${searchedCategories.contains("" + category.id)}">
					<p>
						<input type="checkbox" name="category_id" value="${category.id }"
							checked />
						${category.name }
					</p>
				</g:if>
				<g:else>
					<p>
						<input type="checkbox" name="category_id" value="${category.id }" />
						${category.name }
					</p>
				</g:else>
			</g:each>
			<br/>
			<button type="submit" class="btn">Search Deals</button>
		</form>
	</div>
	<div id="search-result" class="pull-left">
		<table width="100%" class="table table-striped">
		<g:each var="deal" in="${searchedDeals}">
			<tr>
				<td width="120"><g:img uri="${deal.imageUrl}" height="100" width="100" class="pull-left" /></td>
				<td>
					<a href="#" onclick="window.open('${deal.detailUrl}', 'DealWebsite', 'location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes');"> <b> ${deal.title }</b></a><br/>
					<small>${deal.merchant.name }</small><br/>
					${deal.description }<br/>
					${deal.tags }
				</td>
				<td width="20%"><h3>$${deal.price }</h3></td>
			</tr>
		</g:each>
		</table>
	</div>
	<div style="clear: both;"></div>
</body>
</html>